<link rel="stylesheet" href="/assets/home/city/css/city-picker.css">
<link rel="stylesheet" href="/assets/home/css/profile.css">
<script src="/assets/home/city/js/city-picker.data.min.js"></script>
<script src="/assets/home/city/js/city-picker.min.js"></script>
<!-- 头部 -->
<div class="top_div">
    <img src="/assets/home/images/bac.jpg" class="top_img">
    <div class="userInfo">
        <img class="uPic" src="{$LoginUser['avatar_text']}" /><br />
        <span class="uBalance">{$LoginUser['nickname']}</span>
    </div>
</div>

<div class="form">
    <!-- 表单提交，有文件上传要设置enctype -->
    <form method="post" enctype="multipart/form-data">
        <div class="item">
            <div class="title">
                昵称：
            </div>
            <input type="text" name="nickname" placeholder="请输入昵称" value="{$LoginUser['nickname']}">
        </div>
        <div class="item">
            <div class="title">
                手机号码：
            </div>
            <input type="text" readonly name="mobile" placeholder="请输入手机号码" value="{$LoginUser['mobile']}">
        </div>
        <div class="item">
            <div class="title">
                邮箱：
            </div>
            <input type="text" name="email" placeholder="请输入邮箱" value="{$LoginUser['email']}">
        </div>
        <div class="item">
            <div class="title">
                登录密码：
            </div>
            <input type="password" name="password" placeholder="请输入登录密码">
        </div>
        <div class="item">
            <div class="title">
                性别：
            </div>
            <div class="sex">
                <input type="radio" name="gender" value="0" id="secrecy" {$LoginUser['gender']=='0' ? 'checked' : ''
                    }><label for="secrecy">保密</label>
                <input type="radio" name="gender" value="1" id="man" {$LoginUser['gender']=='1' ? 'checked' : ''
                    }><label for="man">男</label>
                <input type="radio" name="gender" value="2" id="woman" {$LoginUser['gender']=='2' ? 'checked' : ''
                    }><label for="woman">女</label>
            </div>
        </div>
        <div class="item">
            <div class="title">
                地区选择：
            </div>
            <div style="position:relative;width: 80%;">
                <input id="city" readonly type="text" data-toggle="city-picker" name="region" />
                <!-- 隐藏域 -->
                <input type="hidden" name="code" id="code">
            </div>
        </div>
        <div class="item">
            <div class="title">
                修改头像：
            </div>
            <button type="button" class="layui-btn upload-img" onclick="avatar.click()">上传头像</button>
            <input type="file" name="avatar" id="avatar">
        </div>
        <div class="item">
            <!-- 条件判断，有图片就显示，没有图片就不显示 -->
            <img src="{$LoginUser['avatar_text']}" id="avatar-preview" alt="">

        </div>
        <input type="submit" value="修改资料">
    </form>
</div>
<script>
    $("#avatar").change(function () {
        let file = $(this)[0].files[0];
        let src = URL.createObjectURL(file)
        $("#avatar-preview").attr("src", src)
    })

    $("#city").on("cp:updated", function () {
        var citypicker = $(this).data("citypicker");
        var code = citypicker.getCode("district") || citypicker.getCode("city") || citypicker.getCode("province");
        $("#code").val(code);
    });

    $('#city').citypicker({
        province: `{$province}`,
        city: `{$city}`,
        district: `{$district}`,
    });
</script>